<template>
  <div class="userInfoShow-main">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="region">
          <el-select v-model="form.region" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="date1">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="出生日期"
              v-model="form.date1"
              style="width: 100%"
              format="yyyy 年 MM 月 dd 日"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="彩蛋">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="爱好">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食" name="type"></el-checkbox>
            <el-checkbox label="活动" name="type"></el-checkbox>
            <el-checkbox label="线下活动" name="type"></el-checkbox>
            <el-checkbox label="品牌" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="推荐">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "1",
        date1: new Date(),
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
          name: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]
        },
      dialogVisible: false,
      userBg: {
          backgroundColor:"#409EFF"
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      let self = this
      this.$refs.form.validate((res) => {
          console.log(res)
          if (res) {
              this.$message.success('创建成功')
            //   let data1 = this.form.date1
              let str = this.form.date1.toLocaleDateString()
              this.form.data = str.split('/').join('-')
              console.log(this.form)
          } else {
              this.$message.error('创建失败')
          }
      })
    },
    handleClose() {},
    close () {
        this.dialogVisible = false
    }
  },
};
</script>

<style lang="less">
.userInfoShow-main {
}
</style>